<template>
	<s-layout
	  v-show="state.show_home"
	  class="index-wrap"
	  :bgStyle="template?.style?.background"
	  :navbarStyle="template?.style?.navbar"
	  :showLeftButton="false"
	  navbar="custom"
	  tabbar="/pages/index/home"
	>
	  <s-block
		v-for="(item, index) in template?.data"
		:key="index"
		:styles="item.style"
		:type="item.type"
	  >
		<s-block-item
		  :type="item.type"
		  :data="item.data"
		  :styles="item.style"
		></s-block-item>
	  </s-block>
	  <!-- <s-popup-image v-if="state.key_num==0"/> -->
	  
	 
	</s-layout>
  </template>
  
  <script setup>
  import sheep from '@/sheep';
  // import { showAuthModal } from '@/sheep/hooks/useModal';
  import {
	reactive,
	ref,
	computed,
	watch
  } from 'vue';
  import {
	onLoad,
	onShow,
	onPageScroll,
	onReachBottom,
	onPullDownRefresh,
	onShareAppMessage,
	onShareTimeline,
  } from '@dcloudio/uni-app';
  import appApi from '@/sheep/api/app';
  import {
	sys
  } from '@/sheep/helper';
  import sGroupBuy from '@/sheep/components/s-group-buy/s-group-buy.vue';
  import mitt from '@/sheep/mitt.js';
  import $share from '@/sheep/platform/share';
  import {
	showAuthModal
  } from '@/sheep/hooks/useModal';
  
  // const template = ref([])
  const template = computed(() => sheep.$store('app').template?.index);
  watch(()=>sheep.$store('app').isAuditMode,(newVal)=>{
	  if(newVal){
		  uni.switchTab({
			url: '/pages/index/index',
		  });
	  }
  },{
	  immediate:true
  })
  let state = reactive({
	show_search: false,
	coupon_list: [],
	show_home: false,
	key_num: 0,
	show_couponPop:false,
	show_downlod:false,
	params: {
	  begin_date: '',
	  end_date: '',
	  area: '杭州市',
	  sort: '',
	  longitude: '',
	  latitude: '',
	  keyword: '',
	},
  
	loadStatus: '',
	permissionText: false,
	sns_data: {
	  current_page: 1,
	  data: [],
	  last_page: 41,
	  per_page: '10',
	  total: 402,
	},
  });
  
  onShareAppMessage(() => {
	return {
	  title: '分享', // 分享给好友的标题
	  path: '/pages/index/home',
	};
  });
  
  
  function go_sns (id) {
	sheep.$router.go('/pages/tuangou/tuangou_info?id=' + id);
  }
  
  onLoad(async (option) => {
	// await pagesInit()
  
	
  
	if (sheep.$store('app').isAuditMode == true) {
	  uni.switchTab({
		url: '/pages/index/index',
	  });
	  return;
	}
  
	// #ifdef MP
	// 小程序识别二维码
	if (option.spm) {
	  if (option.spm.includes('.')) {
		$share.decryptSpm(option.spm);
	  }
	}
	if (option.scene) {
	  if (option.scene.includes('.')) {
		$share.decryptSpm(option.scene);
	  }
	}
	// #endif
  
  
	// #ifdef H5 || APP
	uni.hideTabBar()
	// #endif
  
	// 缓存邀请码
  
	if (option.invite_code) {
	  let invite_code = option.invite_code;
	  uni.setStorageSync('invite_code', invite_code);
	}
  
	state.show_home = true;
  
	get_sns_list();
  
	state.key_num = uni.getStorageSync('key_num') || 0;
	
	
  
  });
  
  
  function get_sns_list () {
	uni.request({
	  url: `https://sns-beta-huanglv.shisan-xi.work/api/find/list?page=${state.sns_data.current_page}&category_id=12&city=${state.params.area}`,
	  success: (res) => {
		state.sns_data.data = state.sns_data.data.concat(res.data.data.data);
		state.sns_data.last_page = res.data.data.last_page;
		setTimeout(() => {
		  uni.stopPullDownRefresh();
		}, 500);
	  },
	});
  }
  
  async function pagesInit () {
  
	if (sheep.$store('app').isAuditMode == true) {
	  const res = await sheep.$api.merchant.init(sheep.$store('app').audit_versions);
	  console.log('res.data.template',res.data.template)
	  if (res.error == 0) {
		let templateHome = res.data.template.index;
		template.value = templateHome;
	  }
	} else {
	  const res = await sheep.$api.merchant.init();
	  console.log('res.data.template',res.data.template)
	  if (res.error == 0) {
		let templateHome = res.data.template.index;
		template.value = templateHome;
	  }
	}
  }
  onPageScroll((e) => {
	if (e.scrollTop >= 60) {
	  state.show_search = true;
	} else {
	  state.show_search = false;
	}
  });
  
  
  onPullDownRefresh(async () => {
  
	get_sns_list();
  
	mitt.emit('indexOnPullDownRefresh', {
	  value: '11'
	});
  
	setTimeout(function () {
	  uni.stopPullDownRefresh();
	}, 800);
  });
  
  onReachBottom(() => {
	mitt.emit('indexOnReachBottom', {
	  value: '1'
	});
  });
  </script>
  
  <style scope lang="less">
  view {
	box-sizing: border-box;
  }
  
  .page {
	width: 100%;
	background-color: #fff;
  }
  
  image {
	display: block;
	width: 100%;
	height: 100%;
  }
  
  .hot_title {
	width: 100%;
	margin-top: 10rpx;
	// background: linear-gradient(102deg, #7881d9 -4%, #f0b8ea 99%);
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: flex-start;
  
	.icon {
	  width: 100%;
	  margin-left: 20rpx;
	}
  
	.title_zh {
	  font-size: 35rpx;
	  font-weight: 700;
	  color: #fff;
	  margin: 0 20rpx;
	  text-shadow: 5px 5px 5px #827eff;
	}
  
	.title_en {
	  color: #ff8a76;
	  font-size: 35rpx;
	  font-weight: 500;
	}
  }
  
  .title_top {
	width: 100%;
	height: 180rpx;
	color: #1a1a1a;
	text-align: center;
	line-height: 260rpx;
	font-weight: 700;
	background-color: #ffffff;
  }
  
  // 首页搜索 end
  
  // 首页按钮列表
  .tab_list_container {
	position: relative;
	width: 100%;
	padding: 15rpx 0 0 0;
	background-color: rgb(255, 255, 255);
	border-radius: 20rpx;
	margin-top: -15rpx;
  
	.wx-swiper-dot {
	  background-color: #d8d8d8;
	  width: 8rpx;
	  height: 8rpx;
	  border-radius: 20rpx;
	  margin-left: -10rpx;
	}
  
	.wx-swiper-dot-active {
	  background-color: #eeb254;
	  width: 28rpx;
	  height: 8rpx;
	  border-radius: 20rpx;
	}
  
	.wx-swiper-dots.wx-swiper-dots-horizontal {
	  position: absolute;
	  bottom: 12rpx;
	}
  
	swiper {
	  width: 100%;
	  height: 395rpx;
	}
  
	swiper-item {
	  width: 100%;
	}
  }
  
  .tab_list {
	width: 720rpx;
	height: 366rpx;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
	border-radius: 15rpx;
	overflow: hidden;
	align-content: space-between;
  
	.tab_item {
	  width: 142rpx;
	  height: 120rpx;
	  padding: 17rpx 0;
	  // border: 1px solid red;
	  font-size: 22rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: center;
	  box-shadow: inset 0px 2px 10px 0px hsla(0, 0%, 100%, 0.302);
  
	  &:nth-child(n + 6) {
		width: 138rpx;
	  }
  
	  .icon {
		width: 50rpx;
		height: 50rpx;
		//   background-color: #ffffff;
	  }
	}
  }
  
  // 首页按钮 end
  
  // 消费卷活动
  .activity_container {
	width: 100%;
	height: 340rpx;
	margin-top: 10rpx;
	position: relative;
  
	.activity_bg {
	  position: absolute;
	  top: 0;
	  left: 0;
	}
  
	.activity_under {
	  width: 100%;
	  height: 170rpx;
	  position: absolute;
	  padding: 0 25rpx;
	  bottom: 0;
	  left: 0;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  
	  .activity_btn {
		position: relative;
		padding: 15rpx 0 0 20rpx;
		width: 160rpx;
		height: 160rpx;
		top: -13rpx;
		z-index: 0;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		// background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 3rpx 3rpx 10rpx 2rpx #cccccc;
  
		.activity_btn_title {
		  font-size: 30rpx;
		  font-weight: 700;
		  display: flex;
  
		  .activity_btn_title_left {
			background: linear-gradient(to right, #7881d9, #f0b8ea);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		  }
		}
  
		.activity_btn_ctitle {
		  margin-top: 5rpx;
		  font-size: 20rpx;
		  color: #000000;
		}
  
		.activity_btn_icon {
		  width: 50rpx;
		  height: 50rpx;
		  // background-color: pink;
		  position: absolute;
		  right: 20rpx;
		  bottom: 20rpx;
		}
  
		.activity_btn_bg {
		  position: absolute;
		  left: 0;
		  top: 0;
		  z-index: -9;
		}
	  }
	}
  }
  
  // 酒店卡片列表
  
  // 卡片列表
  .article_list {
	width: 100%;
	padding: 15rpx;
	display: flex;
	justify-content: space-between;
  
	.left {
	  // background-color: #FFA746;
	}
  
	.right {
	  // background-color: green;
	}
  }
  
  .article_card {
	width: 354rpx;
	border-radius: 8rpx;
	margin-bottom: 15rpx;
	overflow: hidden;
	// border: 1px solid red;
	background-color: #fff;
	box-shadow: 3rpx 3rpx 5rpx 5rpx #f0f0f0;
  
	.article_card_top {
	  width: 100%;
	  position: relative;
  
	  .article_card_img {
		width: 352rpx;
		height: 352rpx;
	  }
  
	  .position {
		height: 40rxp;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 10rpx 0 0;
		display: flex;
		background-color: #00000062;
		align-items: center;
		border-radius: 0 4rpx 4rpx 0;
  
		.position_ico {
		  width: 70rpx;
		  height: 40rpx;
		}
  
		.position_title {
		  color: #fff;
		  font-size: 22rpx;
		  margin-left: 10rpx;
		  height: 40rpx;
		  line-height: 38rpx;
		}
	  }
	}
  
	.article_hotel {
	  width: 100%;
	  padding: 15rpx 15rpx;
  
	  .article_hotel_name {
		font-size: 26rpx;
		font-weight: 700;
		overflow: hidden; // 超出隐藏
		text-overflow: ellipsis; // 超出显示省略号
		display: -webkit-box; // 弹性伸缩盒子
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式
		-webkit-line-clamp: 2; // 限制文本显示2行
	  }
  
	  .article_hotel_start {
		font-size: 18rpx;
		color: #6e6e6e;
		margin: 10rpx 0;
	  }
  
	  .article_hotel_price {
		display: flex;
		align-items: baseline;
  
		.origin_price {
		  text-decoration: line-through;
		  color: #999999;
		  font-size: 22rpx;
		}
  
		.sell_price {
		  color: #ff0000;
		  font-size: 26rpx;
		}
	  }
	}
  }
  </style>